<template>
  <el-card>
    <template #header>复杂表格</template>
    <configTable size="small" v-bind="config" :data="list" />
  </el-card>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { ref, reactive } from 'vue';
import configTable from '@/components/jsx/table.tsx';
// import defaultConfig from './config.js';
const loading = ref(false);
const list = ref([]);
const config = reactive({
  height: window.innerHeight - 200,
  showSummary: true,
  summaryMethod(param) {
    const { columns, data } = param;
    return columns.map(({ property }) => {
      if (property === 'index') return '合计';
      if (['stnm', 'hnnm', 'year', 'mxqdt', 'mnqdt'].includes(property)) return '';
      return data.reduce((sum, row) => (sum += row[property] || 0), 0).toFixed(2);
    });
  },
  columns: [
    { prop: 'index', label: '序号', align: 'center', width: 50, fixed: 'left', colSpan: 4 },
    { prop: 'stnm', label: '沟名', align: 'center', width: 100, fixed: 'left' },
    {
      prop: 'hnnm',
      label: '站名',
      width: 100,
      fixed: 'left'
    },
    { prop: 'year', label: '年份', width: 150 },
    {
      label: '月均流量',
      align: 'center',
      group: [
        { prop: '1', label: '一月', width: 90 },
        { prop: '2', label: '二月', width: 90 },
        { prop: '3', label: '三月', width: 90 },
        { prop: '4', label: '四月', width: 90 },
        { prop: '5', label: '五月', width: 90 },
        { prop: '6', label: '六月', width: 90 },
        { prop: '7', label: '七月', width: 90 },
        { prop: '8', label: '八月', width: 90 },
        { prop: '9', label: '九月', width: 90 },
        { prop: '10', label: '十月', width: 90 },
        { prop: '11', label: '十一月', width: 90 },
        {
          prop: '12',
          label: '十二月',
          width: 90,
          render(h, { row }) {
            return h('div', { style: 'color:red' }, row['12']);
          }
        }
      ]
    },

    {
      label: '年最大',
      align: 'center',
      group: [
        { prop: 'mxq', label: '流量', align: 'center', width: 90 },
        { prop: 'mxqdt', label: '日期', align: 'center', width: 90 }
      ]
    },
    {
      label: '年最小',
      align: 'center',
      group: [
        { prop: 'mnq', label: '流量', align: 'center', width: 90 },
        { prop: 'mnqdt', label: '日期', align: 'center', width: 90 }
      ]
    },
    { prop: 'avq', label: '年均流量', align: 'center', width: 90, fixed: 'right' },
    { prop: 'runoff', label: '年径流量', align: 'center', width: 120, fixed: 'right' }
  ],
  handler(data) {
    return data.reduce((result, value, index) => {
      const { dataMap = {}, stnm, hnnm } = value;
      const yearArr = Object.keys(dataMap);
      result.push({
        stnm,
        hnnm,
        index: index + 1,
        rowspan: yearArr.length + 1
      });
      yearArr.forEach(year => {
        result.push({ year, ...dataMap[year] });
      });
      return result;
    }, []);
  },
  spanMethod(option) {
    const { row, column } = option;
    const flag = ['index', 'stnm', 'hnnm'].includes(column.property);
    if (flag && row.rowspan) return [row.rowspan, 1];
    if (!flag && !row.rowspan) return [1, 1];
    return [0, 0];
  }
});

const getdata = async (i = 1) => {
  loading.value = true;
  const res = await axios.get('data/table.data.json');
  list.value = res.data;
  loading.value = false;
};
getdata();
</script>
